import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import CheckCommissionVM from 'cvm/checkCommission/checkCommission'
import './checkCommission.less'

const CheckCommissionList = observer(({ vm }) => {
  const item = vm.commissionDetail
  return (
    <div>
      {
        item.Commission !== undefined && <div className='commission-box'>
          <div className='account-balance'>
            <p className='rule' onClick={() => { vm.handleToCommissionRule() }}>佣金结算规则</p>
            <p className='balance-title'>佣金总额(元)</p>
            <p className='balance-count'>{item.Commission.toFixed(2)}</p>
          </div>
          <div className='flex-wrap common-box border-bottom-3 border-top-0' onClick={() => { vm.handleToSettlement() }}>
            <div className='flex-3'>已结算至账户余额</div>
            <div className='flex-2 right-img'>{item.JsTotal.toFixed(2)}<img src={require('../../images/right.png')} /></div>
          </div>
          <div className='flex-wrap common-box border-bottom-3' onClick={() => { vm.handleToBalance() }}>
            <div className='flex-3'>待结算佣金(时长服务)</div>
            <div className='flex-2 right-img'>{item.DJsTotal.toFixed(2)}<img src={require('../../images/right.png')} /></div>
          </div>
          <div className='flex-wrap common-box border-bottom-0 margin-bottom' onClick={() => { vm.handleToTotal() }}>
            <div className='flex-3'>客户投诉已扣除合计</div>
            <div className='flex-2 right-img red-style'>{item.Deduct.toFixed(2)}<img src={require('../../images/right.png')} /></div>
          </div>
          <div className='flex-wrap common-box border-bottom-3 border-top-0'>
            <div className='flex-3'>本月新增时长销售佣金</div>
            <div className='flex-2 right-img1'>{item.MonthShiChang.toFixed(2)}</div>
          </div>
          <div className='flex-wrap common-box border-bottom-3'>
            <div className='flex-3'>本月新增时长服务佣金</div>
            <div className='flex-2 right-img1'>{item.MonthFuWu.toFixed(2)}</div>
          </div>
          <div className='flex-wrap common-box border-bottom-0 margin-bottom'>
            <div className='flex-3'>本月新增硬件销售佣金</div>
            <div className='flex-2 right-img1'>{item.MonthYingJian.toFixed(2)}</div>
          </div>
          <div className='flex-wrap common-box border-bottom-3 border-top-0'>
            <div className='flex-3'>时长销售佣金总额</div>
            <div className='flex-2 right-img1'>{item.ShiChang.toFixed(2)}</div>
          </div>
          <div className='flex-wrap common-box border-bottom-3'>
            <div className='flex-3'>时长服务佣金总额</div>
            <div className='flex-2 right-img1'>{item.FuWu.toFixed(2)}</div>
          </div>
          <div className='flex-wrap common-box border-bottom-0 margin-bottom'>
            <div className='flex-3'>硬件销售佣金总额</div>
            <div className='flex-2 right-img1'>{item.YingJian.toFixed(2)}</div>
          </div>
        </div>
      }
    </div>
  )
})

@observer
class checkCommission extends Component {
  constructor (props) {
    super(props)
    window.document.title = '查看佣金'
    this.vm = new CheckCommissionVM(props)
  }
  render () {
    return (
      <div>
        <CheckCommissionList vm={this.vm} />
      </div>
    )
  }
}

export default checkCommission
